<template>
  <div class="content">
    <!-- 头部导航栏组件 -->
    <div class="main">
      <NavBar title="家政平台" />
      <van-row type="flex" justify="center">
        <!-- 家政公司详情 -->
        <van-col>
          <!-- 轮播图 -->
          <van-swipe
            class="my-swipe"
            :autoplay="3000"
            indicator-color="white"
            :height="171"
          >
            <van-swipe-item>1</van-swipe-item>
            <van-swipe-item>2</van-swipe-item>
            <van-swipe-item>3</van-swipe-item>
            <van-swipe-item>4</van-swipe-item>
          </van-swipe>
          <!-- 关注 -->
          <div class="people">
            <div class="num">
              <strong>{{ companyInfo.scale }}</strong>
              <p>注册家政员数</p>
            </div>
            <div class="num">
              <strong>{{ companyInfo.client }}</strong>
              <p>已认证客户数</p>
            </div>
            <div class="line"></div>
            <van-button color="#3f51b5" round size="mini" block
              >关注</van-button
            >
          </div>
          <!-- 业务范围 -->
          <SecondNavBar title="业务范围">
            <template v-slot:content>
              <div class="businessScope">
                <van-grid :border="false" :column-num="5">
                  <van-grid-item>
                    <van-image
                      width="48px"
                      height="48px"
                      round
                      center
                      src="https://img01.yzcdn.cn/vant/cat.jpeg"
                    />
                    <span>月嫂</span>
                  </van-grid-item>
                  <van-grid-item>
                    <van-image
                      width="48px"
                      height="48px"
                      round
                      src="https://img01.yzcdn.cn/vant/cat.jpeg"
                    />
                    <span>月嫂</span>
                  </van-grid-item>
                  <van-grid-item>
                    <van-image
                      width="48px"
                      height="48px"
                      round
                      src="https://img01.yzcdn.cn/vant/cat.jpeg"
                    />
                    <span>月嫂</span>
                  </van-grid-item>
                </van-grid>
              </div>
            </template>
          </SecondNavBar>
          <!-- 公司资料tab栏 -->
          <van-tabs
            @click="onClick"
            color="#3F51B5"
            line-height="2px"
            line-width="56px"
          >
            <van-tab title="公司资料">
              <SecondNavBar title="公司资质">
                <template v-slot:content>
                  <van-grid :column-num="3" :gutter="6">
                    <van-grid-item>
                      <van-image
                        src="https://img01.yzcdn.cn/vant/apple-1.jpg"
                      />
                    </van-grid-item>
                    <van-grid-item>
                      <van-image
                        src="https://img01.yzcdn.cn/vant/apple-2.jpg"
                      />
                    </van-grid-item>
                    <van-grid-item>
                      <van-image
                        src="https://img01.yzcdn.cn/vant/apple-3.jpg"
                      />
                    </van-grid-item>
                  </van-grid>
                </template>
              </SecondNavBar>
              <SecondNavBar title="办公环境">
                <template v-slot:content>
                  <van-grid :column-num="3" :gutter="6">
                    <van-grid-item>
                      <van-image
                        src="https://img01.yzcdn.cn/vant/apple-1.jpg"
                      />
                    </van-grid-item>
                    <van-grid-item>
                      <van-image
                        src="https://img01.yzcdn.cn/vant/apple-2.jpg"
                      />
                    </van-grid-item>
                    <van-grid-item>
                      <van-image
                        src="https://img01.yzcdn.cn/vant/apple-3.jpg"
                      />
                    </van-grid-item>
                  </van-grid>
                </template>
              </SecondNavBar>
              <SecondNavBar title="获得荣誉">
                <template v-slot:content>
                  <van-grid :column-num="3" :gutter="6">
                    <van-grid-item>
                      <van-image
                        src="https://img01.yzcdn.cn/vant/apple-1.jpg"
                      />
                    </van-grid-item>
                    <van-grid-item>
                      <van-image
                        src="https://img01.yzcdn.cn/vant/apple-2.jpg"
                      />
                    </van-grid-item>
                    <van-grid-item>
                      <van-image
                        src="https://img01.yzcdn.cn/vant/apple-3.jpg"
                      />
                    </van-grid-item>
                  </van-grid>
                </template>
              </SecondNavBar>
              <SecondNavBar title="团队风采">
                <template v-slot:content>
                  <van-grid :column-num="3" :gutter="6">
                    <van-grid-item>
                      <van-image
                        src="https://img01.yzcdn.cn/vant/apple-1.jpg"
                      />
                    </van-grid-item>
                    <van-grid-item>
                      <van-image
                        src="https://img01.yzcdn.cn/vant/apple-2.jpg"
                      />
                    </van-grid-item>
                    <van-grid-item>
                      <van-image
                        src="https://img01.yzcdn.cn/vant/apple-3.jpg"
                      />
                    </van-grid-item>
                  </van-grid>
                </template>
              </SecondNavBar>
              <SecondNavBar title="基本资料">
                <template v-slot:content>
                  <p>公司名称：湖南金管家家政服务有限责任公司</p>
                  <p>法人代表：马小艾</p>
                  <p>公司电话：0731-86912560</p>
                  <p>公司规模：200人以下</p>
                  <p>
                    公司地址：湖南省长沙市天心区暮云工业园凯覆漫城烛照小区4栋1311房
                  </p>
                </template>
              </SecondNavBar>
              <SecondNavBar title="公司介绍">
                <template v-slot:content>
                  <p>
                    月子家政服务公司以家庭生活需求为导向，以资源的调整、整合为基础，以专业、便利的服务为手段，立足于系统解决和实现各类家政需求，引导客户家庭健康可持续发展、推动社会进步，公司致力于打造成为最具影响力的品质家政管理规范的制定者和中式家政服务的集成者。
                  </p>
                </template>
              </SecondNavBar>
            </van-tab>
            <!-- 注册人员详情 -->
            <van-tab title="注册人员">
              <Employee></Employee>
            </van-tab>
          </van-tabs>
        </van-col>
      </van-row>
    </div>
    <!-- 底部tab栏组件 -->
    <Contact />
  </div>
</template>

<script>
import NavBar from '@/components/navbar/navBar_md'
import Contact from '@/components/contact'
import SecondNavBar from '@/components/navbar/secondNavBar.vue'
import Employee from '@/components/employee'
import { Toast } from 'vant'
import { getCompanyDetails } from '@/api'
export default {
  name: 'CompanyDetail',
  props: {
    companyId: {
      type: [Number, String],
      required: true
    }
  },
  components: {
    NavBar,
    Contact,
    Employee,
    SecondNavBar
  },
  data () {
    return {
      companyInfo: [] // 公司信息
    }
  },
  created () {
    this.getCompanyDetails()
  },
  mounted () {},
  methods: {
    // 获取公司详情
    async getCompanyDetails () {
      const { data } = await getCompanyDetails(this.companyId)
      this.companyInfo = data
    },
    onClick (name, title) {
      console.log(name, title)
    }
  }
}
</script>

<style scoped lang="less">
.main {
  height: 90vh;
  overflow-y: auto;
}
.van-row {
  height: 90vh;
  position: relative;
  background-color: #f8f8f8;
  z-index: 1;
  .van-col {
    position: absolute;
    top: -44px;
    width: 674px;
    margin-bottom: 134px;
    background-color: #f8f8f8;
    .my-swipe .van-swipe-item {
      color: #fff;
      font-size: 20px;
      line-height: 150px;
      text-align: center;
      background-color: #39a9ed;
    }
    .people {
      position: relative;
      display: flex;
      justify-content: space-around;
      margin-top: 20px;
      margin-bottom: 20px;
      height: 292px;
      background-color: #fff;
      .num {
        flex: 1;
        text-align: center;
        padding-top: 30px;
        strong {
          font-size: 48px;
          color: #3f51b5;
        }
        p {
          font-size: 26px;
          color: #101010;
        }
      }
      .line {
        position: absolute;
        left: 50%;
        top: 74px;
        width: 2px;
        height: 68px;
        background-color: #e5e5e5;
      }
      .van-button {
        position: absolute;
        bottom: 36px;
        left: 50%;
        transform: translateX(-50%);
        width: 152px;
      }
    }
    .businessScope {
      background-color: #fff;
      span {
        font-size: 26px;
      }
    }
    .van-tabs {
      margin-top: 20px;
      background-color: #fff;
      p {
        margin-left: 32px;
        font-size: 24px;
        color: #7b7777;
      }
    }
  }
}
</style>
